<?php
use_stylesheet('data/main.css');
use_javascript('data/main.js');
use_javascript('data/tiptool.js');
use_javascript('data/gmap.js');
?>


<script type="text/javascript">
    $(document).ready(function(){
        $("#close-msg").click(function(){
           $("#flash-msg").hide();
        });

        $("#back-dir").button({icons: {primary: 'ui-icon-circle-arrow-w'}});
        $("#next_loction").button({icons: {secondary: 'ui-icon-circle-triangle-e'}});
    })
</script>

<body onload="initialize_map()">
<table width="977px">
    <tr>
        <td>
            <div class="datacontent ui-widget ui-corner-all" align="">
                <?php include_component('approval', 'researchStatus', array('researchid' => $researchid)) ?>
                <br/>
                <table>
                    <tr>
                        <td>
                            <h1 class="data">Location: <?php echo $observation->getLocation();?></h1>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            <div id="depth_list" class="ui-corner-all">
                                <?php include_component('data', 'depthList', array(
                                    'observationId' => $observation->id,
                                    'currentDepth' => $currentDepth,
                                    'relatedAction' => 'showSpecies')) ?>
                            </div>
                            <br/>
                            <?php if ($sf_user->hasFlash('deleteMsg')): ?>
                                <div id="flash-msg" class="ui-state-error">
                                    <span><?php echo $sf_user->getFlash('deleteMsg') ?></span>
                                    <span id="close-msg" class="link-div">close</span>
                                </div>
                            <?php endif; ?>
                            <?php include_component('data', 'speciesForm', array('currentDepth' => $currentDepth)) ?>
                        </td>
                        <td align="center">
                            <div style="display:none" id="obs_data">
                                <div id="observation_id"><?php echo $observation->getId();?></div>
                                <div id="research_id"><?php echo $researchid?></div>
                                <div id="lat"><?php echo $observation->getLat() ?></div>
                                <div id="lng"><?php echo $observation->getLng() ?></div>
                            </div>
                            <div align="center" style="border: 1px solid #96B7E9; padding: 3px">
                                <div id="map_canvas" style="display:block; width: 460px; height: 370px;">

                                </div>
                                <em style="font-size: 12px">Observation locations within this research. Click an icon to see its biological data</em>
                                <button id="next_loction" onclick="panToNext()" style="font-size: 13px">to next location</button>
                            </div>
                            
                        </td>
                    </tr>
                </table>
                

                <div id="table-wrap" style="margin: 15px 0">

                    <?php include_component('data', 'speciesList', array('currentDepth' => $currentDepth, 'page' => $page)) ?>

                </div>

                <p>
                    <a id="back-dir" href="<?php echo url_for('data/showObservation?id='.$researchid) ?>">Back to Observation List</a>
                </p>
            </div>
        </td>
    </tr>
</table>
</body>